<!--
 * @Author: your name
 * @Date: 2021-11-04 16:47:31
 * @LastEditTime: 2022-01-15 11:54:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \star-cat-h5\src\views\artist\add\Artist.vue
-->
<template>
  <div class="artist">
    <van-form @submit="onSubmit">
      <van-field name="uploader" class="uploader_field clear_border">
        <!-- :rules="
          artist.card_url
            ? []
            : [
                {
                  required: true,
                  message: '*请上传身份证正面照',
                  trigger: 'onSubmit',
                },
              ]
        " -->
        <template #input>
          <div class="uploader-base-cont" @click="cardUploader">
            <van-image
              class="uploader-box"
              :src="artist.card_url || require('@/assets/card_bg.png')"
            />
            <img
              :src="require('@/assets/ic_xiangji.png')"
              v-show="!artist.card_url"
              class="ic_xiangji"
            />
            <p class="tips" v-show="!artist.card_url">
              请上传身份证人像照片 (仅用于身份验证)
            </p>
          </div>
          <!-- <van-image
            v-if="artist.card_url"
            @click="cardUploader"
            class="uploader-box"
            :src="artist.card_url"
          />
          <div
            class="uploader-base-cont uploader-box"
            v-else
            @click="cardUploader"
          >
            <van-image
              class="uploader-box"
              :src="require('@/assets/card_bg.png')"
            />
            <p class="tips" v-show="!artist.card_url">请上传身份证人像照片 (仅用于身份验证)</p>
          </div> -->
          <van-uploader
            v-model="fileList"
            :max-count="1"
            :after-read="afterRead"
            :before-read="beforeRead"
            ref="cardUploader"
            :max-size="50 * 1024 * 1024"
            :preview-image="false"
            v-show="false"
          >
          </van-uploader>
        </template>
      </van-field>
      <van-field
        v-model="artist.name"
        name="艺人姓名"
        label="艺人姓名"
        placeholder="请输入艺人姓名"
        maxlength="10"
        :rules="[{ required: true, trigger: 'onChange' }]"
      />
      <van-field
        v-model="artist.card_num"
        name="身份证号"
        label="身份证号"
        placeholder="请输入身份证号"
      />
      <!-- :rules="[
          { required: true, trigger: 'onChange' },
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '身份证格式不正确',
            trigger: 'onSubmit',
          },
        ]" -->
      <div class="sub_btn_box">
        <van-button class="btn" plain hairline type="info" native-type="submit"
          >下一步</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { upload_img } from "@/axios/ossUpload";
import { validateCard, validateIdCard } from "@/axios/artist";
import { Toast } from "vant";
export default {
  data() {
    return {
      fileList: [],
    };
  },
  computed: {
    ...mapGetters(["artist", "getReview_id"]),
  },
  methods: {
    onSubmit() {
      Toast.loading({
        duration: 0,
        overlay: true,
      });
      validateCard({
        card_num: this.artist.card_num,
        artist_id: this.artist.artist_id,
      })
        .then((res) => {
          Toast.clear();
          this.$store.dispatch("artist/setCurrent", 1);
        })
        .catch((err) => {
          Toast.clear();
          Toast.fail(err);
        });
    },
    beforeRead(file) {
      console.log(file);
      if (
        ["image/jpeg", "image/jpg", "image/png", "image/webp"].indexOf(
          file.type
        ) == -1
      ) {
        Toast("图片格式错误");
        return false;
      }
      return true;
    },
    // 文件上传
    afterRead(data) {
      // 此时可以自行将文件上传至服务器
      Toast.loading({
        duration: 0,
        overlay: true,
      });

      upload_img(
        data.file,
        (url) => {
          Toast.clear();
          this.$set(this.artist, "card_url", url);
          this.fileList = [];
          this.validateIdCard(url);
        },
        (err) => {
          Toast.clear();
          Toast.fail("上传失败");
        }
      );
    },
    validateIdCard(card_url) {
      validateIdCard({ card_url })
        .then((res) => {
          let { card_num, name } = res;
          this.artist.card_num = card_num;
          this.artist.name = name;
        })
        .catch((err) => {
          Toast.fail("识别失败");
        });
    },
    cardUploader() {
      this.$refs.cardUploader.chooseFile();
    },
  },
};
</script>

<style scoped>
@import "./css/input.css";
/* .artist .uploader_field >>> .van-field__control {
  width: 100%;
} */

.uploader-box {
  height: 184px;
  width: 100%;
  border-radius: 7px;
  overflow: hidden;
}
.uploader_field >>> .van-field__body {
  padding-left: 0;
  padding-right: 0;
}
.artist .uploader-base-cont {
  position: relative;
  width: 100%;
}
.artist .uploader-base-cont .tips {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 266px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #535968;
  line-height: 20px;
}
.artist .uploader-base-cont .ic_xiangji {
  position: absolute;
  width: 62px;
  height: 62px;
  top: 41px;
  left: 50%;
  transform: translateX(-50%);
}
/* .card_uploader >>> .van-uploader__wrapper {
  background-color: #a8bfe2;
  height: 184px;
  width: 343px;
  background: #a8bfe2;
  border-radius: 7px;
  opacity: 0.13;
} */
</style>